<template>
	<view class="myAddress">
		<!-- 选择地理位置弹窗 -->
		<u-popup ref="dlpopup" v-model="show" mode="bottom">
			<view class="dlpopup">
				<view class="dltitle">
					<view class="dlcancel" @click="dlcancel()">取消</view>
					<view>请选择省市</view>
					<view class="dlsure" @click="dlsure()">确定</view>
				</view>
				<view class="dlcon">
					<scroll-view class="dlView" scroll-y="true">
						<view :class="item.isSel==true?'target':''" v-for="(item,index) in cityPick.provinceArr"
						 :key="index" @click="dlsel(item,index)">{{item.name}}</view>
					</scroll-view>
					<scroll-view class="dlView" scroll-y="true">
						<view :class="item.isSel==true?'target':''" v-for="(item,index) in cityPick.cityArr"
						 :key="index" @click="dlsel(item,index)">{{item.name}}</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getbankcity } from '../../api/index.js'
	export default {
		name: 'myAddress',
		data() {
			return {
				show:false,
				cityPick:{  //选择省、市、区弹窗
					provinceArr:[],
					cityArr:[],
					curProvince:'',
					curCity:''
				},
				tempCity:'',  //临时选中的城市
				tempProvince:'' //临时选中的省
			}
		},
		mounted:function(){
			this.getbankcityFun(1)
		},
		methods: {
			//点击确定
			dlsure:function(){
				this.cityPick.curCity = this.tempCity
				this.cityPick.curProvince = this.tempProvince
				this.$emit('getAddressdata',this.tempCity)
				this.show = false;
			},
			open:function(){
				this.show = true;
			},
			close:function(){
				this.show = false;
			},
			//点击取消
			dlcancel:function(){
				//如果点击取消则清空选择状态
				this.show = false;
			},
			//点击到当前的省或市
			dlsel:function(item,curIndex){
				let curArr = '';
				if(item.level == 2){ //假如是选择省
					curArr = this.cityPick.provinceArr;
					this.tempProvince = item;
					this.tempProvince.index = curIndex;
				}else{ //假如是选择市
					curArr = this.cityPick.cityArr;
					this.tempCity = item;
					this.tempCity.index = curIndex;
				}
				curArr.forEach((val,index,arr)=>{
					if(index == curIndex){
						this.$set(curArr[index],'isSel',true)
						//假如本地数据里面没有下级数据，则请求接口后存储到本地，否则直接获取
						if(item.level == 2 && curArr[index].children){
							this.cityPick.cityArr = curArr[index].children;
						}else{
							this.getbankcityFun(val.id,item.level,curIndex)
						}
					}else{
						this.$set(curArr[index],'isSel',false)
					}
				})
			},
			//获取城市信息
			getbankcityFun:function(cityid,level,index){
				if(level>2){ //默认只请求省市的数据
					return ;
				}
				let that = this;
				getbankcity({
					cityid:cityid
				}).then((res) => {
					console.log(res)
					if(res.code == 0){
						if(level == 2){ //如果是返回市级别的数据
							that.cityPick.cityArr = res.data;
							that.cityPick.provinceArr[index].children = res.data;
						}else{ //如果是返回省级别的数据
							that.cityPick.provinceArr = res.data
						}
					}
				}).catch((e) => {
					console.log(e);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.myAddress{
		.dlpopup{
			background-color: #FFFFFF;
			width: 100%;
			box-sizing: border-box;
			font-size: $uni-font-size-base;
			.dltitle{
				display: flex;
				justify-content: space-between;
				padding: 20rpx 40rpx;
				border-bottom: 1rpx solid $uni-border-color-e5;
				.dlsure{
					color: #007AFF;
				}
				.dlcancel{
					color: #999999;
				}
			}
			.dlcon{
				display: flex;
				justify-content: space-around;
				.dlView{
					height: 600rpx;
					text-align: center;
					view{
						height: 100rpx;
						line-height: 100rpx;
						color: #A8A8A8;
						&.target{
							color:#007AFF;
						}
					}
				}
			}
		}
	}
</style>
